<!-- 用户注册界面 -->
<template>
  <div id="register">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="16" :md="10" :span="10">
        <div class="top">
          <i class="iconfont icon-kaoshi"></i><span class="title">智能教学系统</span>
        </div>
        <div class="bottom">
          <div class="container">
            <p class="title">用户注册</p>
            <el-form
              :model="form"
              :label-position="labelPosition"
              label-width="100px"
            >
              <el-form-item label="姓名">
                <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
              </el-form-item>

              <el-form-item label="邮箱">
                <el-input
                  v-model="form.email"
                  placeholder="请输入邮箱地址"
                  type="email"
                ></el-input>
              </el-form-item>

              <el-form-item label="验证码">
                <el-input
                  v-model="form.code"
                  placeholder="请输入验证码"
                ></el-input>
                <el-button class="send-code" @click="sendCode">获取验证码</el-button>
              </el-form-item>

              <el-form-item label="身份">
                <el-radio-group v-model="form.role">
                  <el-radio :label="0">学生</el-radio>
                  <el-radio :label="1">教师</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="密码">
                <el-input
                  v-model="form.password"
                  placeholder="请输入密码"
                  type="password"
                  autocomplete="new-password"
                ></el-input>
              </el-form-item>

              <el-form-item label="确认密码">
                <el-input
                  v-model="confirmPassword"
                  placeholder="请再次输入密码"
                  type="password"
                  autocomplete="new-password"
                ></el-input>
                <div
                  v-if="passwordMismatch"
                  class="warning"
                >两次输入的密码不一致</div>
              </el-form-item>

              <div class="submit">
                <el-button
                  type="primary"
                  class="row-register"
                  @click="register"
                >注册</el-button>
              </div>

              <div class="options">
                <div class="login-link">
                  <span>已有账号?</span>
                  <span @click="goLogin"><a href="javascript:;">去登录</a></span>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      labelPosition: 'left',
      form: {
        username: '',
        password: '',
        role: 0,    // 0-学生，1-教师
        email: '',
        code: '',
      },
      confirmPassword: ''
    }
  },
  computed: {
    passwordMismatch() {
      return (
        this.confirmPassword.length > 0 &&
        this.form.password !== this.confirmPassword
      )
    }
  },
  methods: {
    // 发送邮箱验证码
    sendCode() {
      if (!this.form.email) {
        this.$message({ showClose: true, type: 'warning', message: '请输入邮箱地址' });
        return;
      }
      this.$axios.post(`/api/customer/email`, null, { 
        params:{ email:this.form.email }
      }).then((res) => {
        console.log(res)
        this.$message({ showClose: true, type: 'success', message: '验证码已发送' });
      }).catch(() => {
        this.$message({ showClose: true, type: 'error', message: '发送失败，请稍后重试' });
      });
    },
    // 用户注册
    register() {
      // 检查所有必填项
      const { username, email, code, role, password } = this.form;
      if (!username || !email || !code || !password || !this.confirmPassword) {
        this.$message({ showClose: true, type: 'warning', message: '请完成信息填写' });
        return;
      }
      if (this.passwordMismatch) {
        this.$message({ showClose: true, type: 'warning', message: '两次输入的密码不一致' });
        return;
      }
      // 发起注册请求
      this.$axios({
        url: `/api/customer/register`,
        method: 'post',
        data: { ...this.form }
      }).then(res => {
        console.log(res)
        if (res && res.data && res.data.code==200) {
          this.$message({ showClose: true, type: 'success', message: '注册成功，请登录' });
          this.$router.push({ path: '/' });
        } else {
          this.$message({ showClose: true, type: 'error', message: res.data.message || '注册失败' });
        }
      }).catch(() => {
        this.$message({ showClose: true, type: 'error', message: '网络错误，请稍后再试' });
      });
    },
    goLogin() {
      this.$router.push({ path: '/' });
    }
  }
}
</script>

<style lang="less" scoped>
#register {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}
#register .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/loginbg.png') center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}
#register .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#register .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}
#register .top .icon-kaoshi {
  font-size: 80px;
}
#register .top .title {
  margin-top: 20px;
}
#register .bottom {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  padding: 20px;
}
#register .container .title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}
#register .submit {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.row-register {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  padding: 15px 20px;
}
.send-code {
  margin-top: 10px;
}
.warning {
  color: #f56c6c;
  margin-top: 5px;
  font-size: 12px;
}
.options {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.login-link span:first-child {
  color: #8c8c8c;
}
.login-link a {
  color: #ff962a;
  text-decoration: none;
}
</style>
